<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 自己练习 </title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: green;
        }

    </style>
</head>
<body>
    <div id="app">
        <p> 一、绑定监听 </p>
            <ul>
                <li>1、获取标签内的值 </li>
                <li>2、获取自定义传参值 </li>
                <li>3、获取标签内的值 + 获取自定义传参值 </li>
            </ul>
            <button @click="test1($event)">  按键1 </button>
            <button @click="test2('huangkun')">  按键2 </button>
            <button @click="test3('hello world',$event)">  按键3 </button>
        <p> 二、事件修饰符 </p>
            <ul>
                <li>1、A链接点击事件修饰</li>
                <li>2、两个div 叠加的 外部事件  与 外部事件 </li>
            </ul>
            <a @click.prevent="test4" href="http://www.baidu.com"> 点击打开 百度 链接 </a>
            <div class="div1" @click.stop="test5">
                外部 div
                <div class="div2" @click.stop="test6"> 内部 div </div>
            </div>
        <p> 三、按键修饰符（示例：enter键） </p>
            <ul>
                <li>1、键盘某个键才能触发事件 </li>
                <li>2、键盘某个键对应的code数字，才能触发事件 </li>
            </ul>
            <input type="text"  v-on:keyup.enter="test7">
            <input type="text"  @keyup.enter="test8($event)">
    </div>
</body>
</html>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" >
    new Vue({
        el:"#app",
        data:"",
        methods:{
            test1(message){
                console.log(message)
                alert(message.target.innerHTML)
            },
            test2(str){
                console.log(str)
                alert(str)
            },
            test3(a,b){
                console.log(a +' ==== '+ b.target.innerText)
                alert(a +' ==== '+ b.target.innerText)
            },
            test4(){
                console.log('点击了')
                alert('点击了')
            },
            test5(){
                console.log('test5() 外部div')
                alert('外部div')
            },
            test6(){
                console.log('test6() 内部div')
                alert('内部div')
            },
            test7(){
                console.log('test7() ')
                alert('test7()')
            },
            test8(msg){
                console.log(msg)
                console.log(msg.code,msg.keyCode)
                alert('test8(),' + 'keyCode ===== ' +msg.keyCode)
            },

        }
    })
</script>